<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script th:src="@{/static/JS/jquery-3.5.1.js}"></script>
</head>
<body>

    <input type="file"  id="image" />
    <input type="button" id="btn" value="转base64"/>
    <input type="button" id="btn2" value="转img"/>
    <input type="image" id="img"/>
<script>
    $(function () {
        var base64="";
        $("#btn").click(function () {
            var reader = new FileReader();
            var AllowImgFileSize = 2100000; //上传图片最大值(单位字节)（ 2 M = 2097152 B ）超过2M上传失败
            var file = $("#image")[0].files[0];
            var imgUrlBase64;
            if (file) {
                //将文件以Data URL形式读入页面
                imgUrlBase64 = reader.readAsDataURL(file);
                reader.onload = function (e) {
                    //var ImgFileSize = reader.result.substring(reader.result.indexOf(",") + 1).length;//截取base64码部分（可选可不选，需要与后台沟通）
                    if (AllowImgFileSize != 0 && AllowImgFileSize < reader.result.length) {
                        alert( '上传失败，请上传不大于2M的图片！');
                        return;
                    }else{
                        //执行上传操作
                        base64=reader.result;
                        alert(base64)
                    }
                }
            }
        })
        $("#btn2").click(function () {
            document.getElementById('img').setAttribute( 'src',base64)
        })
    })
</script>

</body>
</html>